<template>
    <div class="goodinfo-container">
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            >
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!-- 轮播图区域 -->
        <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
                    <swiper :lunbotulist="lunbolist"></swiper>
				</div>
			</div>
        </div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
			<div class="mui-card-header">{{ this.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
                        <span>市场价：<del>${{ market_price }}</del></span>
                        <span class="price_now">销售价：<span>${{ sell_price }}</span></span>
                    </p>
                    <p class="number">购买数量：
                        <!-- 这种传递max值的方法:当goodsinfo时动态获取时，max会为undefined
                        我们可以使用watch属性监听，获取有效的max值 -->
                        <numberbox @getcount="getSelectedCount"
                        :max="stock_quantity" ></numberbox>
                    </p>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
				
                </div>
			</div>
		</div>

        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{ goodsinfo.goods_no }}</p>
                    <p>库存情况：{{ stock_quantity }}件</p>
                    <p>上架时间：{{ goodsinfo.add_tiem|dateFormat }}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">
                    图文介绍</mt-button> 
                <mt-button type="danger" size="large" plain @click="goComment(id)">
                    商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    //导入轮播图组件
    import swiper from '../subcomponents/swiper.vue'
    //导入数字选择框组件
    import numberbox from '../subcomponents/goodsinfo_numberbox.vue'
    export default{
        data(){
            return {
                id:this.$route.params.id,
                title:this.$route.params.title,
                sell_price:this.$route.params.sell_price,
                market_price:this.$route.params.market_price,
                stock_quantity:this.$route.params.stock_quantity,
                lunbolist:[//获取到的录播图的数据
                    {id:1,src:'/src/images/goodslist/goodsinfo_lunbo1.jpg'},
                    {id:2,src:'/src/images/goodslist/goodsinfo_lunbo2.jpg'},
                    {id:3,src:'/src/images/goodslist/goodsinfo_lunbo3.jpg'},
                    ],
                goodsinfo:{//获取到的商品信息 
                    // title:"一加手机68GB+128GB",
                    add_tiem:"2015-4-20 01:15:20",
                    goods_no:"SD2562448632",
                    id:89,
                    market_price:799,
                    sell_price:599,
                    stock_quantity:12
                },
                ballFlag:false,//控制小球隐藏和显示的标识符
                selectedCount:1, //保存用户选中商品的数量，默认为1
            }
        },
        methods:{
            goDesc(id){
                // 点击跳转到图文介绍页面
                this.$router.push({name:'goodsdesc', params:{id}})
            },
            goComment(id){
                // 点击跳转到评论页面
                this.$router.push({name:'goodscomment', params:{id}})
            },
            addToShopCar(){
                //添加到购物车
                this.ballFlag=!this.ballFlag;
                var goodsInfo={
                    id:this.id,
                    title:this.title,
                    count:this.selectedCount,
                    price:this.sell_price,
                    selected:true
                }
                this.$store.commit('addToCar',goodsInfo);
            },
            beforeEnter(el){
                el.style.transform="translate(0,0)"
            },
            enter(el,done){
                //小球动画优化思路：
                // 1.小球最终移动到的最终目的地不能写死，因为分辨率 以及滚轮下拉距离会影响
                // 2.次距离需要动态计算，使用 object.getBoundingClientRect();获取徽章和小球
                // 的横纵坐标 x和y坐标分别求差值，就是需要位移的距离
                el.offsetWidth;
                //获取小球在页面中的位置
                var ballPosition=this.$refs.ball.getBoundingClientRect();
                //获取徽标在页面中的位置
                var badgePosition=document.getElementById('badge').getBoundingClientRect();

                var xDist=badgePosition.left-ballPosition.left;
                var yDist=badgePosition.top-ballPosition.top;

                el.style.transform=`translate(${xDist}px,${yDist}px)`
                el.style.transition="all .5s cubic-bezier(0.28,-0.45,0.27,0.55)"
                done()
            },
            afterEnter(el){
                this.ballFlag=!this.ballFlag
            },
            getSelectedCount(count){
                //当子组件把选中的数量传递给    父组件的时候，  把选中的值保存到data上
                this.selectedCount=count;               
            }
        },
        components:{
            swiper,
            numberbox
        }
    }
</script>
    

<style lang="less">
.goodinfo-container{
    background-color: #eee;
    overflow: hidden;
    margin-bottom: 50px;
    .ball{
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background-color: red;
        position: absolute;
        z-index: 99;
        left: 148px;
        top: 390px;
    }
}
.mui-card-content-inner{
    .price_now{
    margin-left: 10px;
        span{
            color: red;
            font-size: 16px;
            font-weight: bold;
        }
    }
.number{
    div{
        display: inline-block;
        }   
    }
}
.mui-card-footer{
    display: block!important;
    button{
        margin: 15px 0;
    }
} 
</style>

